<template>
    <bi-horizon-scroll-list class="bi-flight-card-hotels" :data="data">
        <div 
            class="bi-flight-card-hotels__item"
            slot="item"
            slot-scope="{ item, index }"
            :class="{'is-first': !index, 'is-last': index === lastIndex}"
        >
            <slot name="item" :item="item" :index="index"></slot>
        </div>
    </bi-horizon-scroll-list>
</template>
<script>
import BiHorizonScrollList from 'board/common/horizon-scroll-list'

export default {
    name: 'BiFlightCardHotels',
    components: {
        BiHorizonScrollList
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        lastIndex () {
            return (this.data || []).length - 1
        }
    },
    methods: {
        handleRenderItemType (item, index) {
            const ni = index + 1
            if (!(ni % 3)) {
                return 'triple'
            } else if (!(ni % 2)) {
                return 'double'
            } else if (!(ni % 1)) {
                return 'once'
            }
        }
    }
}
</script>
<style lang="scss">
.bi-flight-card-hotels__item{
    width: 100px;
    padding: 0 3.5px;
    &.is-first{
        padding-left: 0;
    }
    &.is-last {
        padding-right: 0;
    }
}
</style>